<template>
  <div id="search">
    <div class="search_wrap">
      <input
        v-model="value"
        placeholder="请输入您要搜索的商品"
        @keyup.enter="handleInput"
      />
      <button @click="handleCancel">取消</button>
    </div>
 
    <ul class="searchList">
      <li class="search_item" v-for="good in goodsList" :key="good.goods_id"
      >
        <router-link :to="`/goods_detail?goods_id=${good.goods_id}`">
        {{ good.goods_name }}
        </router-link>
      </li>
    </ul>
   
  </div>
</template>

<script>
import requests from "@/api/ajax";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",

  data() {
    return {
      value: "",
      goodsList: [],
    };
  },

  mounted() {},

  methods: {
    handleInput() {
      const { value } = this;
      if (!value.trim()) {
        return alert("请不要输入空");
      }
      this.qsearch(value);
    },
    async qsearch(query) {
      const res = await requests({ url: "/goods/qsearch", params: { query } });
      console.log(res);
      this.goodsList = res.message;
      
    },
    handleCancel() {
      this.value = "";
      this.goodsList = [];
    },
  },
};
</script>

<style lang="less" scoped>
#search {
  height: 100vh;
  position:relative;
  background-color: #f3f4f6;
}
.content{
   
    position: absolute;
  bottom: 49px;
  left: 0;
  right: 0;overflow: hidden;
}
.search_wrap {
  height: 60px;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  padding: 10px;
}

input {
  border: 1px solid #eee;
  width: 80%;
  background-color: #fff;
  margin-right: 10px;
}
button {
  border: 1px solid #eee;
}
.search_item {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 15px ;
 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  /* overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; */
}
</style>
